<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mb-sm">
      <form-field-group title="主要信息" :model-with-create-update="$d.form" model-id="backId" class="q-mt-sm">
        <div class="q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>是否成功</span>
              <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>顺丰请求ID</span>
              <easy-input :model-value="$d.form.requestId" readonly/>
            </div>
          </div>
          <div class="row q-col-gutter-sm q-pt-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>仓库编码</span>
              <easy-input :model-value="$d.form.warehouseCode" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>顺丰空托盘转移单单号</span>
              <easy-input :model-value="$d.form.containerMoveNum" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>是否收货完成</span>
              <easy-input :model-value="$d.form.result === '0' ? '否' : '是'" readonly/>
            </div>
          </div>
          <div class="row q-col-gutter-sm q-pt-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>预留字段1</span>
              <easy-input :model-value="$d.form.userDef1" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>预留字段2</span>
              <easy-input :model-value="$d.form.userDef2" readonly/>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
              <span>预留字段3</span>
              <easy-input :model-value="$d.form.userDef3" readonly/>
            </div>
          </div>
          <div class="row q-col-gutter-sm q-pt-sm">
            <div class="col-12">
              <span>错误信息</span>
              <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
            </div>
          </div>
          <div class="row q-col-gutter-sm q-pt-sm">
            <div class="col-12">
              <span>原始请求数据</span>
              <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
            </div>
          </div>
        </div>
      </form-field-group>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'LpnMoveBackLog'
}
</script>
<script lang="ts" setup>
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper';
import {reactive, ref} from 'vue';
import {LpnMoveBackLog} from 'src/defs/sf/lpnMoveBackLog';
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper';

const pageTitle = '空托盘转移单回告日志'
useTitleHelper(pageTitle)

const $d = reactive({
  form: {} as LpnMoveBackLog
})

let loadingState = ref(false)
const loadModelData = function () {
  loadingState.value = true
  $f.axios
    .get<LpnMoveBackLog>('/mhlbc/sf/get-lpn-move-back-log-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/sf/lpn-move-back-log',
  $d.form,
  null,
  '/sf/lpn-move-back-log',
  '/sf/lpn-move-back-log/detail',
  null,
  null,
  loadModelData,
  null
)
const {
  pageSubTitle
} = detailStatus
</script>

<style scoped>

</style>
